<template>
  <li v-if="divided" class="dropdown-divider"></li>
  <li
    class="dropdown-item-wrap"
    :class="{
      'is-disabled': disabled,
    }"
    @click="handleClick"
  >
    <slot>
      <a class="dropdown-item" v-waves="waves" href="javascript:void(0);">
        <i v-if="icon" :class="icon"></i>
        {{ text }}
      </a>
    </slot>
  </li>
</template>
<script lang="ts">
import { defineComponent, inject } from "vue";
import { MittSymbol } from "@/utils/constant";
import { Emitter } from "mitt";
export default defineComponent({
  name: "fo-dropdown-item",
  componentName: "FoDropdownItem",
  props: {
    command: {
      default: "undefined",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    divided: {
      type: Boolean,
      default: false,
    },
    waves: {
      type: Array,
      default: ["button", "float"],
    },
    icon: {
      type: [Array, String, Boolean],
      default: false,
    },
    text: {
      type: String,
      default: "Content",
    },
  },
  setup(props, context) {
    const emitter: Emitter | undefined = inject(MittSymbol);
    const handleClick = () => {
      emitter && emitter.emit("menu-item-click", props.command);
    };
    return {
      handleClick,
    };
  },
});
</script>
<style lang="less">
.dropdown-item-wrap {
  .is-disabled {
    cursor: default;
    color: #bbb;
    pointer-events: none;
  }
}
</style>
